<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="b" uri="/WEB-INF/tld/blank.tld" %>
<script type="text/javascript">

	var currentNode;

	$(function() {
		initTree();
	})
	
	function initTree() {
		$('#dictTree').treeview(
			{
				data: getTree(),
				onNodeSelected: function(event, node) {
					console.info(event);
					currentNode = node;
			    }
			});
	}
	
	function getTree() {
		var result;
		$.ajax({
			url:"/dict/tree",
			async:false,
			dataType:"json"
		}).done(function(data) {
			result = data;
		})
	    return result;
	}
	
	function saveDict() {
		$.ajax({
			url:"/dict/save",
			type:"post",
			data:$("#dict-form").serialize(),
			dataType:"json"
		}).done(function(data){
			alert(data.msg);
			if(data.isSuccess) {
				$("#dict-form").find("input,select").val("");
				initTree();
			}
		})
	}
	
	/* function addSiblingDict() {
		if(currentNode==null) 
			alert("请先指定要操作的节点！！");
		else 
			$("input[name='dict.pid']").val(currentNode.pid);
	}*/	
 
	function addSonDict() {
		if(currentNode==null) 
			alert("请先指定要操作的节点！！");
		else {
			$("#dict-edit-div").show();
			var id = currentNode.id;
			$("input[name='dict.pid']").val(id);
			$.ajax({
				url:"/dict/load/"+id,
				dataType:"json"
			}).done(function(data){
				var path = $("#dict-form").find("input[name='dict.path']");
				path.val(data.path);
				path.next().val(data.path);
			})
		} 
	}
	
	function updateDict() {
		if(currentNode==null) 
			alert("请先指定要操作的节点！！");
		else {
			$("#dict-edit-div").show();
			$.ajax({
				url:"/dict/load/"+currentNode.id,
				dataType:"json"
			}).done(function(data){
				var elements = $("#dict-form").find("input");
				$.each(elements, function(i, n){
					var name = $(n).attr("name");
					if(name!=null)
						name = name.replace("dict.", "");
					var value = eval("data."+name);
					$(n).val(value==null?"":value);
				})
				var path = data.path;
				var index = path.lastIndexOf("\/");
				path = path.substring(0, index);
				$("#dict-form").find("input[name='dict.path']").next().val(path);
			})
		} 
	}
	
	function delDict() {
		if(currentNode==null) 
			alert("请先指定要操作的节点！！");
		else {
			if(currentNode.is_leaf==0) {
				alert("请先删除子节点！！");
			} else if(window.confirm("确定要删除？")) {
				$.ajax({
					url:"/dict/del/"+currentNode.id+"-"+currentNode.pid,
					dataType:"json",
				}).done(function(data){
					alert(data.msg);
					if(data.isSuccess) 
						initTree();
				})
			}
		}
	}
	
	function changePath(input) {
		var path = $("#dict-form").find("input[name='dict.path']");
		path.val(path.next().val()+"/"+$(input).val());
	}

</script>

<!-- content starts -->
<div>
	<ul class="breadcrumb">
	    <li>系统管理</li>
	    <li>字典管理</li>
	</ul>
</div>

<div class="row">
    <div class="ch-container">
	<div class="row">
    <div class="box col-md-3">
        <div class="box-inner">
            <div class="box-header well" data-original-title="">
                <h2><i class="glyphicon glyphicon-tasks"></i> 字典树</h2>

                <div class="box-icon">
                    <a href="#" class="btn btn-setting btn-round btn-default"><i
                            class="glyphicon glyphicon-cog"></i></a>
                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                            class="glyphicon glyphicon-chevron-up"></i></a>
                    <a href="#" class="btn btn-close btn-round btn-default"><i
                            class="glyphicon glyphicon-remove"></i></a>
                </div>
            </div>
            <div class="box-content">
            	<!-- <a href="javascript:;" class="btn btn-sm btn-primary" onclick="addSiblingDict();">新增同级</a> -->
            	<a href="javascript:;" class="btn btn-sm btn-primary" onclick="addSonDict();">新增</a>
            	<a href="javascript:;" class="btn btn-sm btn-primary" onclick="updateDict();">修改</a>
            	<a href="javascript:;" class="btn btn-sm btn-primary" onclick="delDict();">删除</a>
            	<p/>
            	<div id="dictTree"></div>
            </div>
        </div>
    </div>
    <!--/span-->

    <div id="dict-edit-div" class="box col-md-4" style="display:none;">
        <div class="box-inner">
            <div class="box-header well">
                <h2><i class="glyphicon glyphicon-eye-open"></i> 字典编辑</h2>

                <div class="box-icon">
                    <a href="#" class="btn btn-setting btn-round btn-default"><i
                            class="glyphicon glyphicon-cog"></i></a>
                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                            class="glyphicon glyphicon-chevron-up"></i></a>
                    <a href="#" class="btn btn-close btn-round btn-default"><i
                            class="glyphicon glyphicon-remove"></i></a>
                </div>
            </div>
            <div class="box-content">
            	<div id="edit-div">
                	<form class="form-inline" role="form" id="dict-form">
                		<input type="hidden" name="dict.id">
                		<input type="hidden" name="dict.pid">
					    <div class="form-group">
					        <label>名称：<b:blank num="1"/> </label>
					        <input name="dict.name" type="text" class="form-control">
					    </div>
					    <div class="clearfix"></div><br>
					    <div class="form-group">
					        <label>编码：<b:blank num="1"/> </label>
					        <input name="dict.code" type="text" class="form-control" onblur="changePath(this);">
					    </div>
					    <div class="clearfix"></div><br>
					    <div class="form-group">
					        <label>值：<b:blank num="2"/></label>
							<input name="dict.value" type="text" class="form-control">
					    </div>
					    <div class="clearfix"></div><br>
					    <div class="form-group">
						    <label>属性值1：</label>
							<input name="dict.attr1" type="text" class="form-control">
					    </div>
					    <div class="clearfix"></div><br>
					    <div class="form-group">
					        <label>属性值2：</label>
							<input name="dict.attr2" type="text" class="form-control">
					    </div>
					    <div class="clearfix"></div><br>
					    <div class="form-group">
						    <label>属性值3：</label>
							<input name="dict.attr3" type="text" class="form-control">
					    </div>
					    <div class="clearfix"></div><br>
					    <div class="form-group">
					        <label>属性值4：</label>
							<input name="dict.attr4" type="text" class="form-control">
					    </div>
					    <div class="clearfix"></div><br>
					    <div class="form-group">
					        <label>属性值5：</label>
							<input name="dict.attr5" type="text" class="form-control">
					    </div>
					    <div class="clearfix"></div><br>
					    <div class="form-group">
					        <label>路径：<b:blank num="1"/></label>
					        <input name="dict.path" type="text" class="form-control" readonly="readonly">
					        <input type="hidden">
					    </div>
					    <div class="clearfix"></div><br>
					    <a href="javascript:;" class="btn btn-default" onclick="saveDict();">保存</a>
					</form>
                </div>
            </div>
        </div>
    </div>
    <!--/span-->

</div><!--/row-->
</div>